 <template>
  <el-container>
    <el-main>
      <el-row class="table-wrapper">   
        <el-col :span='24'>  

        <el-form :inline="true" :model="batchForm" class="demo-form-inline">
          <div>
            <el-form-item label="选择快递">
              <el-select v-model="batchForm.kkTypeId" placeholder="请选择快递" style="width: 250px;">
                  <el-option
                          v-for="item in expresses"
                          :key="item.id"
                          :label="item.kkDesc"
                          :value="item.id">
                          </el-option>
              </el-select>
            </el-form-item>
          </div>
          
         <div>
          <el-form-item label="单号前缀">
            <el-input v-model="batchForm.batchPrefix" placeholder="快递单号前缀，可选" style="width: 250px;"></el-input>
          </el-form-item>
          <el-form-item label="单号后缀">
            <el-input v-model="batchForm.batchPostfix" placeholder="快递单号后缀，可选" style="width: 250px;"></el-input>
          </el-form-item>
         </div>
          
          <div>
            <el-form-item label="起始单号">
              <el-input v-model="batchForm.batchStart" placeholder="起始单号" style="width: 250px;"></el-input>
            </el-form-item>
            <el-form-item label="结束单号">
              <el-input v-model="batchForm.batchEnd" placeholder="结束单号" style="width: 250px;"></el-input>
            </el-form-item>
            <el-form-item label="单号长度">
              <el-input v-model="batchForm.batchLength" placeholder="单号长度，不包括前后缀" style="width: 250px;"></el-input>
            </el-form-item>
          </div>
         
         <div>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" style="width: 200px;">创建</el-button>
          </el-form-item>
         </div>
          
        </el-form>
        </el-col>
      </el-row>

      <div class="table_container">
          <el-table
                v-loading="tableLoading"
                :data="batches"
                style="width: 100%">
                <el-table-column 
                    type="index"
                    width="100">
                </el-table-column>
                <el-table-column 
                    label="快递" 
                    prop="kkDesc"
                    width="180">
                </el-table-column>
                <el-table-column 
                  label="前缀"
                  prop="batchPrefix" 
                  width="180">
                </el-table-column>
                <el-table-column 
                  label="后缀"
                  prop="batchPostfix" 
                  width="180">
                </el-table-column>
                <el-table-column 
                  label="起始单号"
                  prop="batchStart" 
                  width="180">
                </el-table-column>
                <el-table-column 
                  label="结束单号"
                  prop="batchEnd" 
                  width="180">
                </el-table-column>
                <el-table-column 
                  label="单号长度"
                  prop="batchLength" 
                  width="180">
                </el-table-column>
                <el-table-column 
                  label="状态"
                  width="180">
                  <template slot-scope="scope">
                  <div v-if="scope.$index == editedRow">
                  <el-select v-model="status" placeholder="状态">
                    <el-option label="有效" value="ENABLE"></el-option>
                    <el-option label="失效" value="CANCELED"></el-option>
                  </el-select>
                  </div>
                  <div v-if="scope.$index != editedRow">
                  {{scope.row.status}}
                  </div>
                  </template>
                </el-table-column>
                <el-table-column label="编辑" width="180">
                    <template slot-scope="scope">
                      <el-button size="small" type="primary" @click="handleEdit(scope.$index)" v-show="scope.$index != editedRow">编辑</el-button>
                      <el-button size="small" type="primary" @click="handleEditOk(scope.$index)" v-show="scope.$index == editedRow">确定</el-button>
                      <el-button size="small" type="primary" @click="handleEditCancel(scope.$index)" v-show="scope.$index == editedRow">取消</el-button>  
                    </template>
                </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 50, 80, 100]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
          </div>
        </div>
    </el-main>
  </el-container>
</template>

<script>
    import {batchCreate, batchConfirm, batchList} from '@/api/batch'
    import {getExpressList} from '@/api/info'

    export default {
      data () {
        return {
          batchForm: {
            kkTypeId: '',
            batchPrefix: '',
            batchPostfix: '',
            batchStart: '',
            batchEnd: '',
            batchLength: '',
            batchType: "TYPE_DESC_BATCH",
          },
          expresses: [],
          batches: [],
          editedRow: -1,
          status: '',
          tableLoading: false,
          currentPage: 1,
          limit: 20,
          total: 0,
        }
      },
      mounted () {
        // this.initData();
        this.refreshExpressList()
        this.refreshBatches()
      },
      methods: {
        
        async onSubmit () {
          const loading = this.$loading({
            lock: true,
            text: '正在加载',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })

          try {
            let result = await batchCreate(this.batchForm)
            if (result.status === 200 && result.data.code === 200) {
              this.refreshBatches()
            } else {
              throw new Error('创建失败')
            }
          } catch (err) {
            // this.$message.error('价格创建失败')
            console.log(err)
          }
          loading.close()
        },
        async refreshExpressList () {
          try {
            const result = await getExpressList(false)
            if (result.status === 200 && result.data.code === 200) {
              this.expresses = result.data.data
            } else {
              throw new Error('获取数据失败')
            }
          } catch (err) {
            // this.$message.error('列表获取失败')
            console.log('获取数据失败', err)
          }
        },

        async refreshBatches () {
          this.editedRow = -1
          this.tableLoading = true
          try {
            const result = await batchList({
              pageIndex: this.currentPage,
              pageSize: this.limit
            })
            if (result.status === 200 && result.data.code === 200) {
              this.batches = result.data.data
              this.total = result.data.page.total
            } else {
              throw new Error('获取数据失败')
            }
          } catch (err) {
            // this.$message.error('列表获取失败')
            console.log('获取数据失败', err)
          }
          this.tableLoading = false
        },
        
        handleEdit (row) {
          this.editedRow = row
          let batch = this.batches[row]
          this.status = batch.status
        },

        async handleEditOk (row) {
          try {
            const result = await batchConfirm({
              id: this.batches[row].id,
              status: this.status
            })
            if (result.status === 200 && result.data.code === 200) {
              this.batches[row].status = this.status
              this.editedRow = -1
            } else {
              throw new Error('获取数据失败')
            }
          } catch (err) {
            // this.$message.error('更新失败')
            console.log('获取数据失败', err)
          }
        },

        handleEditCancel (row) {
          this.editedRow = -1
        },

        handleSizeChange (size) {
        this.limit = size
        this.editedRow = -1
        this.refreshBatches()
        },
        handleCurrentChange (page) {
          this.currentPage = page
          this.editedRow = -1
          this.refreshBatches()
        },
      }
    }
</script>

 <style lang="less" scoped>
    @import '../../style/mixin';
    .main {
        margin: 0 30px;
    }

    .table-wrapper {
        border: 1px solid #ebeef5;
        margin: 30px 0;
        padding-top: 20px;
        padding-left: 10px;
    }

    .table-row {
        border-bottom-width: 1px;
        border-bottom-color: #ebeef5;
        border-bottom-style: solid;
    }

    .table-cell {
        margin: 10px 20px;
        // min-height: 48px;
        // border-right-width: 1px;
        // border-right-color: #ebeef5;
        // border-right-style: solid;
    }

    .table-header {
        min-height: 48px;
        border-bottom-width: 1px;
        border-bottom-color: #ebeef5;
        border-bottom-style: solid;
        background: #f6f6f6;
    }
    .table-header-title {
        margin-left: 10px;
    }

</style>
